<template>
	<el-dialog 
	  v-model="visible" 
	  :title="!dataForm.id ? '新增' : '学习成果评估雷达图'" 
	  :close-on-click-modal="false" 
	  draggable
	  @open="handleDialogOpen"
	  @closed="handleDialogClosed"
	>
	  <div ref="chartContainer" style="width: 100%; height: 500px"></div>
	</el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, watch, nextTick, onBeforeUnmount } from 'vue'
  import { ElMessage } from 'element-plus/es'
  import { useSmEvaluateApi } from '@/api/sm/evaluate'
  import * as echarts from 'echarts'
  
  const emit = defineEmits(['refreshDataList'])
  const chartContainer = ref<HTMLElement>()
  const visible = defineModel<boolean>('visible')
  let myChart: echarts.ECharts | null = null
  
  // 响应式数据
  const dataForm = reactive({
	id: '',
	userTaskId: '',
	knowMaster: '0',
	innovationAbility: '0',
	problemSolve: '0',
	skillApplication: '0',
	readUnderstand: '0'
  })
  
  // 对话框打开处理
  const handleDialogOpen = async () => {
	try {
	  await nextTick()
	  initChart()
	  await updateChartData()
	} catch (error) {
	  ElMessage.error('图表初始化失败')
	  console.error('Chart init error:', error)
	}
  }
  
  // 对话框关闭处理
  const handleDialogClosed = () => {
	if (myChart) {
	  myChart.dispose()
	  myChart = null
	}
  }
  
  // 初始化图表
  const initChart = () => {
	if (!chartContainer.value) return
	
	// 先销毁旧实例
	if (myChart) {
	  myChart.dispose()
	}
	
	myChart = echarts.init(chartContainer.value)
	
	// 基础配置
	const baseOption = {
	  title: {
		text: '学习成果评估图',
		left: 'center'
	  },
	  legend: {
		data: ['我的学习成果评估'],
		bottom: 0
	  },
	  radar: {
		shape: 'polygon',
		splitArea: {
		  areaStyle: {
			color: ['rgba(114, 188, 218, 0.1)']
		  }
		},
		axisLine: {
		  lineStyle: {
			color: 'rgba(114, 188, 218, 0.5)'
		  }
		},
		indicator: [
		  { name: '知识掌握', max: 100 },
		  { name: '阅读理解', max: 100 },
		  { name: '技能应用', max: 100 },
		  { name: '问题解决', max: 100 },
		  { name: '创新能力', max: 100 }
		]
	  },
	  series: [{
		name: '学习成果',
		type: 'radar',
		itemStyle: {
		  color: '#72bcdaff'
		},
		lineStyle: {
		  color: '#72bcdaff'
		},
		areaStyle: {
		  color: 'rgba(114, 188, 218, 0.2)'
		},
		data: []
	  }]
	}
  
	myChart.setOption(baseOption)
	window.addEventListener('resize', handleResize)
  }
  
  // 更新图表数据
  const updateChartData = async () => {
	if (!myChart) return
  
	try {
	  // 转换数据为数值类型
	  const radarData = [
		Number(dataForm.knowMaster) || 0,
		Number(dataForm.readUnderstand) || 0,
		Number(dataForm.skillApplication) || 0,
		Number(dataForm.problemSolve) || 0,
		Number(dataForm.innovationAbility) || 0
	  ]
  
	  // 更新图表配置
	  myChart.setOption({
		series: [{
		  data: [{
			value: radarData,
			name: '我的学习成果评估'
		  }]
		}]
	  })
	  
	  // 强制重绘
	  myChart.resize()
	} catch (error) {
	  console.error('Data update error:', error)
	  throw error
	}
  }
  
  // 窗口大小变化处理
  const handleResize = () => {
	if (myChart) {
	  myChart.resize()
	}
  }
  
  // 初始化方法
  const init = async (id?: number) => {
	try {
	  if (id) {
		await loadEvaluateData(id)
	  }
	} catch (error) {
	  ElMessage.error('数据加载失败')
	  console.error('Data load error:', error)
	}
  }
  
  // 加载评估数据
  const loadEvaluateData = async (id: number) => {
	try {
	  const res = await useSmEvaluateApi(id)
	  Object.assign(dataForm, res.data)
	  await nextTick()
	  if (myChart) {
		await updateChartData()
	  }
	} catch (error) {
	  console.error('API error:', error)
	  throw error
	}
  }
  
  // 组件卸载时清理
  onBeforeUnmount(() => {
	if (myChart) {
	  myChart.dispose()
	  window.removeEventListener('resize', handleResize)
	}
  })
  
  defineExpose({ init })
  </script>